<template>
  <div>
    <el-form :model="formData" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" clearable :disabled="mode === 'look'" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex" required>
            <el-select v-model="formData.sex" placeholder="请选择性别" clearable :disabled="mode === 'look'">
              <el-option label="男" value="man" />
              <el-option label="女" value="woman" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="date" label="出生日期" style="width: 100%;" required>
            <el-date-picker v-model="formData.date" type="date" placeholder="请选择出生日期" style="width: 100%" clearable
              :disabled="mode === 'look'" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" :disabled="mode === 'look'" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button @click="mode = mode === 'add' ? 'look' : 'add'">切换表单模式</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElRow, ElCol, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton } from 'element-plus'

const formData = ref({
  name: 'Hello',
})

const mode = ref('add') // 表单模式：add, look

const rules = ref({
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' },
  ],
  date: [
    { required: true, message: '请选择出生日期', trigger: 'change' },
  ],
})

</script>